<!DOCTYPE html>
<html>
  <head>
		<title>证件上传</title>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" href="../css/supersized.css">
		<link href="../jsp/css/login.css" rel="stylesheet">
		<link href="../jsp/css/authentication.css" rel="stylesheet">
		<!-- 插件样式 -->
		<link rel="stylesheet" type="text/css" href="./css/sm.min.css">

		<!-- 插件js -->
		<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script src="./js/zepto.js"></script>
		<script src="./js/sm.min.js" ></script>
		<script src="./js/jquery.form.js"></script>
		<style type="text/css">
		*{
		touch-action: none;
		}
		</style>
  </head>
  <script>
  var houseId = $.getUrlParam("houseId");
  var userId = $.getUrlParam("userId");
  </script>
  <body style="background: #fff;">
		<div class="container">
			<!-- 用户未上传证件 -->
			<div class="main_content auth_content" style="text-align : -webkit-center; display: none;">
				<!-- 上传房产证、银行卡、其他证件  -->
				<div class="step_block step_03 step_05" id="step05">
					<span class="zhuce_text">上传证件</span>
					<ul class="upload-ul">
					<form method="post" enctype="multipart/form-data" id="form2">
						<h5 class="tit_h5">1、房产证<span class="tit_tips"></span></h5>
						<li class="upload_li">
							<div class="upload--line">
								<input type="file" name="houseCard" class="file_img handle_upload" />
								<div class="is_upload">
									<img src="" alt="" id="paperwork1" class="upload_img" />
									<span class="edit_upload"></span>
									<input type="file" name="houseCard1" class="edit_input handle_upload" />
								</div>
							</div>
						</li>
						
						<h5 class="tit_h5">2、银行卡<span class="tit_tips"></span></h5>
						<li class="upload_li">
							<div class="upload--line">
								<input type="file" name="bankCard" class="file_img handle_upload" />
								<div class="is_upload">
									<img src="" alt="" id="paperwork2" class="upload_img" />
									<span class="edit_upload"></span>
									<input type="file" name="bankCard1" class="edit_input handle_upload"/>
								</div>
							</div>
						</li>
						
						<h5 class="tit_h5">3、其他证件<span class="tit_tips">(可上传多张)</span></h5>
						<div class="others-paper" id="othersPaper">
							<li class="upload_li">
								<div class="upload--line">
								<input type="file" name="otherCerti" class="file_img handle_upload" />
									<div class="is_upload">
										<img src="" alt="" class="upload_img" />
										<span class="edit_upload"></span>
										<input type="file" name="otherCerti1" class="edit_input handle_upload"/>
									</div>
								</div>
							</li>
						</div>
						<span class="add-others" id="addOthers">+添加其他证件</span>
						
						</form> 
						<li >
							<button id="upLoadBtn" class="next_step" >上传</button>
						</li>
					</ul>
				</div>
			</div>

			<!-- 用户已上传过证件，显示用户已上传的证件 -->
			<div class="is_auth_box">
				<form method="post" enctype="multipart/form-data" id="form1">
					<h5 class="is_tit">证件照片</h5>
					<div class="is_block">
						<p class="img_txt">1、房产证</p>
						<div class="is_upload up_img">
							<img src="" alt="" id="paperwork1-2" class="upload_img" />
							<span class="edit_upload"></span>
							<input type="file" name="houseCard1" class="edit_input handle_upload2" />
						</div>

						<p class="img_txt">2、银行卡</p>
						<div class="is_upload up_img">
							<img src="" alt="" id="paperwork2-2" class="upload_img" />
							<span class="edit_upload"></span>
							<input type="file" name="bankCard1" class="edit_input handle_upload2" />
						</div>

						<p class="img_txt">3、其他证件<span class="tit_tips">(可上传多张)</span></p>
						<div class="others-paper" id="othersPaper2">
							<!-- <div class="is_upload up_img">
								<img src="" alt="" class="upload_img" />
								<span class="edit_upload"></span>
								<input type="file" name="otherCerti1" class="edit_input handle_upload2" />
							</div> -->
						</div>
						<span class="add-others" id="addOthers2">+添加其他证件</span>
					</div>
				</form>
				<button id="editBtn" class="next_step" >确定修改证件照片</button>
			</div>

			<!-- 完成验证提示 -->
			<div class="step_block step_04 step_044" id="step04">
				<div class="finsh_text">
					<span class="gou"></span>
					<span class="txt">证件上传完成！</span>
				</div>
				<a class="to_page" id="topage">确定</a>
			</div>
		</div>

		<script type="text/javascript">
			window.$$=window.Zepto = Zepto;
			var picArr = new Array();
			var delArr = new Array();
			var count=0;
			$(function() {
				var othersPaper = [];

				// 进入页面先请求证件信息接口
				$.ajax({
					type: "POST",
					dataType: "json",
					url: '../certificate/getAllCertificateList',
					data: {
						'houseId': houseId
					},
					success: function(data) {
						if(data.success && data.list && data.list.length){
							$(".auth_content").remove();
							$(".is_auth_box").show();
							for(var i = 0; i < data.list.length; i++){
								if (data.list[i].type == "housecard"){
									$("#paperwork1-2").attr("src", data.list[i].url);

								} else if (data.list[i].type == "bankcard"){
									$("#paperwork2-2").attr("src", data.list[i].url);

								} else if (data.list[i].type == "othercard"){
									var otherUrl = data.list[i].url.split(',');
									var _html = '';
									$("#othersPaper2").html("");
									for (var j = 0; j < otherUrl.length-1; j++) {
										picArr.push(otherUrl[j] );
										_html += '<div class="is_upload up_img" index='+count+'><img src="' + otherUrl[j] +'" alt="" class="upload_img" /><span class="edit_upload"></span><input type="file" name="otherCerti1" class="edit_input handle_upload2" onchange="changePic(this)"/></div>'
										count ++;
									}
									$("#othersPaper2").html(_html);
								}
							}
						} else {
							$(".auth_content").show();
						}
					}
				});

				// 上传证件
				$(document).on('change', '.handle_upload', function () {
					var _this = $(this),
			    	_imgUrl = getObjectURL(this.files[0]);
					console.log('_imgUrl:', _imgUrl)
					_this.parents(".upload--line").find(".upload_img").attr("src", _imgUrl );
					_this.siblings(".is_upload").show();
				});

				/*****************************  用户已进行过认证 事件 ****************/
				// 修改证件图片
				$(document).on('change', '.handle_upload2', function () {
					var _this = $(this),
			    	_imgUrl = getObjectURL(this.files[0]);
					console.log('_imgUrl:', _imgUrl)
					_this.siblings(".upload_img").attr("src", _imgUrl );
				});

				// 添加其他证件1
				$("#addOthers").on("click", function(){
					var _html = '';
					_html = '<li class="upload_li add_li"><div class="upload--line"><input type="file" name="otherCerti" class="file_img handle_upload" /><span class="del_upload"></span><div class="is_upload"><img src="" alt="" class="upload_img" /><span class="edit_upload"></span><input type="file" name="otherCerti1" class="edit_input handle_upload"/></div></div></li>'
					$("#othersPaper").append(_html);
				});

				// 添加其他证件2
				$("#addOthers2").on("click", function(){
					var _html = '';
					_html = '<div class="is_upload up_img add_img" index='+count+'><input type="file" name="otherCerti" class="file_img handle_upload2" /><img src="" alt="" class="upload_img" /><span class="del_upload"></span><span class="edit_upload"></span><input type="file" name="otherCerti1" class="edit_input handle_upload2" /></div>'
					$("#othersPaper2").append(_html);
					count ++;
				});

				// 点击删除添加的上传其他证件控件
				$(document).on("click", ".del_upload", function(){
					$(this).parents(".add_li, .add_img").remove();
				});

				
				/*****************************   按钮 事件  **********************/
				// 提交认证/修改认证
				$("#upLoadBtn, #editBtn").on("click", function(){
					if ($(".auth_content").length) {
						var _paperwork1 = $("#paperwork1").attr("src"),
						_paperwork2 = $("#paperwork2").attr("src");

						othersPaper = []
						$("#othersPaper .upload_li").each(function(){
							var _src = $(this).find(".upload_img").attr("src");
							if (_src) {
								othersPaper.push(_src)
							}
						});

						if (!_paperwork1 && !_paperwork2 && !othersPaper.length) {
							$$.toast("至少上传一个证件照片");
							return;
						}
					}
					
					$$.showPreloader("正在上传...");
					$('#form2, #form1').ajaxSubmit({
						url: '../certificate/uploadCertificate',
						type: 'post',
						dataType: 'json',
						data: {
							houseId : houseId, 
							userId : userId,
							delArr : JSON.stringify(delArr)
						},
						beforeSubmit: function () {},
						success: function (data) {
							$$.toast(data.msg);
							if(data.success){
								$(".auth_content, .is_auth_box").hide();
								$("#step04").show();
							}
							$$.hidePreloader();
						},
						error : function (err){
							$$.toast("上传失败");
							$$.hidePreloader();
						},
						clearForm: false,//禁止清楚表单
						resetForm: false //禁止重置表单
					});
				});
			
			});
	function changePic(this_){
		var index=$(this_).parent().attr("index");
		if(delArr != ""){
			for(var i=0;i<delArr.length;i++ ){
				if(delArr[i]!=picArr[index]){
					delArr.push(picArr[index]);
				}
			}
		}else{
			delArr.push(picArr[index]);
		}
	}
	
	$("#topage").on("click",function(){
		window.location.href="./houseCertiList.html?status=1&userId="+userId;
	})
		</script>

	</body>
</html>
